<!--  -->
<template>
  <div class="form">
    <h2 style="text-align: center; margin-top: 30px; margin-bottom: 30px;">个人信息</h2>
    <el-form ref="consoleUser" :model="consoleUser" label-position="top" :rules="rules">
      <el-form-item prop="username" label="昵称" :label-width="formLabelWidth">
        <el-input
          v-model="consoleUser.username"
          autocomplete="off"
          maxlength="20"
          show-word-limit
        />
      </el-form-item>
      <el-form-item prop="password" label="密码" :label-width="formLabelWidth">
        <el-input v-model="consoleUser.password" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="realname" label="代理人姓名" :label-width="formLabelWidth">
        <el-input v-model="consoleUser.realname" autocomplete="off" readonly="true" />
      </el-form-item>
      <el-form-item prop="userPhone" label="手机号" :label-width="formLabelWidth">
        <el-input v-model="consoleUser.userPhone" autocomplete="off" readonly="true" />
      </el-form-item>
      <el-form-item prop="sex" label="性别" :label-width="formLabelWidth">
        <!-- <el-input v-model="consoleUser.sex" autocomplete="off" /> -->
        <el-radio v-model="consoleUser.sex" disabled label="0">男</el-radio>
        <el-radio v-model="consoleUser.sex" disabled label="1">女</el-radio>
      </el-form-item>
      <el-form-item prop="education" label="学历" :label-width="formLabelWidth">
        <el-input v-model="consoleUser.education" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="idcard" label="身份证号" :label-width="formLabelWidth">
        <el-input v-model="consoleUser.idcard" autocomplete="off" readonly="true" />
      </el-form-item>
      <el-form-item prop="email" label="邮箱" :label-width="formLabelWidth">
        <el-input v-model="consoleUser.email" autocomplete="off" maxlength="32" />
      </el-form-item>
      <el-form-item prop="bankName" label="开户行" :label-width="formLabelWidth">
        <el-input v-model="consoleUser.bankName" autocomplete="off" readonly="true" />
      </el-form-item>
      <el-form-item prop="accountName" label="户名" :label-width="formLabelWidth">
        <el-input v-model="consoleUser.accountName" autocomplete="off" readonly="true" />
      </el-form-item>
      <el-form-item prop="accountId" label="账号" :label-width="formLabelWidth">
        <el-input v-model="consoleUser.accountId" autocomplete="off" readonly="true" />
      </el-form-item>
      <el-form-item prop="remarks" label="备注" :label-width="formLabelWidth">
        <!-- <el-input v-model="consoleUser.remarks" autocomplete="off" maxlength="20" /> -->
        <el-input v-model="consoleUser.remarks" type="textarea" :autosize="{ minRows: 5, maxRows: 100}" maxlength="4000" autocomplete="off" />
      </el-form-item>
      <el-form-item class="fujian" prop="file" label="附件" :label-width="formLabelWidth">
        <el-upload
          class="upload-demo"
          name="files"
          :action="url"
          :on-preview="handlePreview"
          multiple
          :limit="5"
          :file-list="fileList"
          disabled
        />
      </el-form-item>
    </el-form>
    <div class="buttons">
      <el-button type="primary" @click="handleUpdate('consoleUser')">修 改</el-button>
    </div>

  </div>

</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getInfo, updateUser2, judgement2 } from '@/api/consoleUser'
export default {
  name: '',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    var checkphone = (rule, value, callback) => {
    // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (value == null) {
        callback(new Error('请输入手机号'))
      } else if (!this.isCellPhone(value)) { // 引入methods中封装的检查手机格式的方法
        callback(new Error('请输入正确的手机号!'))
      } else {
        callback()
      }
    }
    var checkBankName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入开户行'))
      } else if (!this.isChinese(value)) { // 引入methods中封装的检查手机格式的方法
        callback(new Error('请输入中文'))
      } else {
        callback()
      }
    }
    var checkAccountName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入户名'))
      } else if (!this.isChinese(value)) { // 引入methods中封装的检查手机格式的方法
        callback(new Error('请输入中文'))
      } else {
        callback()
      }
    }
    return {
      consoleUser: {},
      url: process.env.VUE_APP_BASE_API + 'file/',
      formLabelWidth: '200px',
      fileList: [],
      rules: {
        username: [{ required: true, validator: this.checkName, trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 8, max: 12, message: '密码建议在8~12位', trigger: 'blur' }],
        userGroup: [{ required: true, message: '请选择用户角色' }],
        realname: [{ required: true, message: '请输入账号所属人', trigger: 'blur' }],
        userPhone: [{ required: true, validator: checkphone, trigger: 'blur' }],
        email: [{ required: true, validator: this.checkEmail, trigger: 'blur' }],
        bankName: [{ required: true, validator: checkBankName, trigger: 'blur' }],
        idcard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
        accountName: [{ required: true, validator: checkAccountName, trigger: 'blur' }],
        accountId: [{ required: true, message: '请输入账号', trigger: 'blur' }]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.fetchData()
    // this.getAllReference()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    handlePreview(file) {
      console.log(file)
      //   window.location.href = file.url

      window.open(file.response.obj)
    },
    fetchData() {
      getInfo().then((resp) => {
        this.fileList = []
        this.consoleUser = resp.obj
        this.consoleUser.userGroup = String(this.consoleUser.userGroup)
        this.consoleUser.sex = String(this.consoleUser.sex)
        if (resp.obj.file) { // 后台返回的文件链接
          const a = (resp.obj.file).split(';')
          a.length -= 1
          if (a.length > 0) {
            a.forEach(item => {
              var obj = {}
              const index = item.lastIndexOf('\/')
              const fileName = item.substring(index + 1, item.length) // 最后的文件名截取出来
              const response = {}
              response.obj = item + ';'
              this.$set(obj, 'name', fileName)
              this.$set(obj, 'response', response) // 修改files里面的结构（name,url）
              this.fileList.push(obj)
            })
          }
        }
      })
    },
    handleUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.consoleUser.file = this.fileUrl
          updateUser2(this.consoleUser).then((resp) => {
            this.$notify({
              title: '修改成功',
              type: 'success'
            })
            this.fetchData()
          })
          this.dialogFormVisible = false

          return true
        } else {
          this.$notify({
            title: '请正确填写',
            type: 'error'
          })
          return false
        }
      })
    },

    isCard(val) {
      if (!/^([1-9]{1})(\d{15}|\d{18})$/.test(val)) {
        return false
      } else {
        return true
      }
    },
    isCellPhone(val) {
      if (!/^1[3456789]\d{9}$/.test(val)) {
        return false
      } else {
        return true
      }
    },
    isChinese(val) {
      if (/[^\u4E00-\u9FA5]/.test(val)) {
        return false
      } else {
        return true
      }
    },
    // 特殊字符过滤
    checkSpecificKey(str) {
      var specialKey = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'"
      for (var i = 0; i < str.length; i++) {
        if (specialKey.indexOf(str.substr(i, 1)) !== -1) {
          return false
        }
      }
      return true
    },

    // 验证字符串
    validateFontSize(rule, value, callback) {
      if (value.length < 30) {
        callback()
      } else {
        callback(new Error('字符串长度在1-30之间'))
      }
    },

    // 验证字符串
    validateCharacter(rule, value, callback) {
      if (this.checkSpecificKey(value)) {
        callback()
      } else {
        callback(new Error('请不要输入特殊字符'))
      }
    },
    checkRtelePhone(rule, value, callback) {
      if (!value) {
        return callback(new Error('联系电话不能为空'))
      } else {
        const reg = /^(0\d{2,3}-?)?[0-9]{7,8}$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的联系电话'))
        }
      }
    },
    checkName(rule, value, callback) {
      if (!value) {
        return callback(new Error('昵称不能为空'))
      } else {
        judgement2(this.consoleUser.username).then((resp) => {
          if (resp.msg === '该昵称已存在！') {
            return callback(new Error('该昵称已存在！'))
          }
          if (resp.msg === '该昵称可用！') {
            callback()
          }
        })
      }
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="less">
.el-autocomplete{
  width: 400px;
}
.el-popper[x-placement^=bottom]{
		width:400px !important;
	}
</style>
<style  scoped>
  .fujian{
    line-height: 0;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
  .avatar {
    width: 300px;
    height: 200px;
    display: block;
  }
  .form{
    border: #E4E7ED 1px solid;
    border-radius: 30px;
    padding: 50px;
    margin: 10px auto;
    width: 900px;
  }
  .buttons{
    text-align: center;
  }

</style>
